const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const friendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const Mfp = require("webpack").container.ModuleFederationPlugin;
module.exports = {
  // 打包环境 默认是生产环境 production
  // 如果是开发环境 这里需要换成 development
  // 接下来为了观察打包后的文件，使用 development
  mode: "development",
  // devtool: "inline-source-map",
  entry: "./src/index.tsx",
  // output: {
  //   publicPath: "/",
  //   path: path.resolve(__dirname, "./dist"),
  //   filename: "[name].bundle.js",
  // },
  output: {
    publicPath: "auto",
    uniqueName: "mydemo1",
  },
  module: {
    rules: [
      // JavaScript
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: "/node-modules/",
      },
      // Images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: "asset/resource",
      },
      // Fonts and SVGs
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: "asset/inline",
      },
      {
        test: /\.(scss|css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
      },
    ],
  },
  resolve: {
    extensions: ["", ".ts", ".tsx", ".js", ".jsx"],
    alias: {
      //根据个人喜好配置@指引文件路径
      "@": require("path").resolve(__dirname, "./src"),
    },
  },

  plugins: [
    //命令行友好提示
    // new friendlyErrorsWebpackPlugin(),
    //打包前清除上次打包
    // new CleanWebpackPlugin(),
    // new Mfp({
    //   name: "demo1",
    //   remotes: {
    //     demo2: "demo2@http://localhost:9001/remoteEntry.js",
    //   },
    // }),
    new HtmlWebpackPlugin({
      // title: "webpack5", //对应打包后html文件 title
      template: "./public/index.html", //html配置路径
      // filename: "index.html",
    }),
  ],
  devServer: {
    open: true, //项目启动直接打开
    // hot: true, //开启热更新
    port: 9000, //端口号
    // static: "./public", //指向静态文件
    headers: { "Access-Control-Allow-Origin": "*" },
  },
};
